
@media only screen and (orientation: landscape){
  .gobang{
    display: flex;
    flex-direction: row;
  
    -webkit-user-select: none;
    user-select: none;
    
    flex-wrap: wrap;
  }
  .board{
    display: flex;
    flex-direction: column;
    margin: 20px 0 0 20px ;
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid black;
  }
  
  .board-row{
  
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* overflow: auto; */
  }
  
  .piece{
    display: flex;
  }
  
  .piece:hover{
    cursor: pointer;
    background: red;
  }
  
  .gobang-menu{
    margin: 20px 0px 0px 5px;
    display: flex;
    flex-direction: column;
  
    font-size: 16px;
    border: 1px solid black;
    min-width: 125px;
  }
  
    .gobang-menu label{
      margin-left: 5px;
      font-size: 18px;
      font-weight: bold;
      margin-right: auto;
    }
  
    .gobang-menu button{
      margin: 5px;
      font-weight: bold;
      margin-right: auto;
    }
}

@media only screen and (orientation: portrait){
  .gobang{
    display: flex;
    flex-direction: column;

    -webkit-user-select: none;
    user-select: none;
    
    flex-wrap: wrap;
  }

  .gobang-menu{
    margin: 0px 20px 0 20px;
    display: flex;
    flex-direction: row;
    font-size: 16px;
    border: 1px solid black;
    /* max-width: 125px; */
  }

    .gobang-menu label{
      margin-left: 5px;
      font-size: 18px;
      font-weight: bold;
      writing-mode: tb-rl;
      
      margin: auto 5px auto 5px;
    }

    .gobang-menu button{
      margin: 5px;
      font-weight: bold;
    }

    .gobang-menu .control{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .gobang-menu .result{
      margin:auto 5px auto 5px;
    }


  .board{
    display: flex;
    flex-direction: column;
    margin: 20px 0 20px 0;
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid black;
  }

  .board-row{

    display: flex;
    flex-direction: row;
    justify-content: center;
    /* overflow: auto; */
  }

  .piece{
    display: flex;
  }

  .piece:hover{
    cursor: pointer;
    background: red;
  }
}

.gobang-mode{
  display: flex;
  justify-content: center;
}

  .gobang-mode label{
    font-weight: bold;
    margin-left: 15px;
  }

.gobang-player{
  display: flex;
  flex-direction: row;
  vertical-align: middle;

  border-top: 1px solid black;
}

  .gobang-player label{
    font-weight: bold;
    margin: auto 5px auto 5px;
  }

.fullfill{
  flex:1;
  margin: auto 0 auto 0;
}

.gobang-server{
  display: flex;
  flex-direction: column;
  font-weight: bold;
  margin: 20px auto auto 5px;
}

  .gobang-server .row {
    display: flex;
  }

  .gobang-server .row label{
    /* min-width: 5em; */
    text-align: right;
  }
  .gobang-server .row button{
    margin-left: auto;
  }

.align-left{
  text-align: left;
}

.align-right{
  text-align: right;
}